<template>
  <div>
    <div id="linechart"></div>
  </div>
</template>

<script>
export default {
  name: 'Vuepro2209Line',

  data() {
    return {
      
    };
  },
  props:['xArr','serData'],
  mounted() {
      this.makeLine()
  },
  watch:{
    serData:{
      handler(){
         this.makeLine()
      },
      deep:true
    }
  },
  methods: {
    makeLine(){
      let charts=this.$echarts.init(document.getElementById('linechart'))
        let arr=[]
        this.serData.forEach((item,index)=>{
          console.log(item,'((((((((((((()))))))))))))')
          if(index==0){
              arr.push( {
              name: '前端',
              type: 'line',
              stack: 'Total',
              data: item
            })
          }
          if(index==1){
              arr.push( {
              name: '后端',
              type: 'line',
              stack: 'Total',
              data: item
            })
          }
           if(index==2){
              arr.push( {
              name: '视觉设计',
              type: 'line',
              stack: 'Total',
              data: item
            })
          }
        })
       let option = {
          title: {
            text: 'Stacked Line'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ["前端","后端","视觉设计"]
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.xArr
          },
          yAxis: {
            type: 'value'
          },
          series: arr
        };

      charts.setOption(option)
    }
  },
};
</script>
<style lang="less">
    #linechart{
      width:1200px;
      height:400px;
      margin-top:20px;
      background:skyblue;
    }
</style>